<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2024/6/23
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>

<%@ page pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" xmlns:c="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>

    <script>
        // 定义confirmDelete函数来弹出确认对话框
        function confirmDelete(productId) {
            // 使用confirm函数弹出确认对话框
            var result = confirm('您确定要删除这个商品吗？这将是一个不可逆的操作！');
            if (result) {
                // 如果用户点击“确定”，则执行删除操作
                // 这里使用了一个表单提交来演示，实际中可能需要使用AJAX请求
                var deleteForm = document.createElement('form');
                deleteForm.action = '${pageContext.request.contextPath}/productDelete';
                deleteForm.method = 'GET';
                deleteForm.style.display = 'none';

                // 创建一个隐藏的input元素，用于发送productId
                var hiddenField = document.createElement('input');
                hiddenField.type = 'hidden';
                hiddenField.name = 'p_id';
                hiddenField.value = productId;

                // 将隐藏的input元素添加到表单中
                deleteForm.appendChild(hiddenField);

                // 将表单添加到body中，并提交表单
                document.body.appendChild(deleteForm);
                deleteForm.submit();

                // 阻止链接默认的导航行为
                return false;
            }
            // 如果用户点击“取消”，则不执行任何操作
            return false;
        }
    </script>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
    <!-- 引入FontAwesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        h2 {
            text-align: center;
            padding: 20px 0;
        }

        .data {
            margin: 0 auto;
            width: 90%;
            max-width: 1000px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .link-container a {
            color: #007bff;
            text-decoration: none;
            margin-right: 10px;
        }

        .link-container a:hover {
            text-decoration: underline;
        }

        .edit-link {
            color: green;
        }

        .delete-link {
            color: red;
        }

        .view-link, .edit-link {
            cursor: pointer;
        }

        .pagination ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination ul li {
            margin: 0 5px;
        }

        .pagination ul li a {
            padding: 8px 12px;
            border: 1px solid #ddd;
            display: block;
        }

        .pagination ul li.active a {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body>

<%@ include file="header.jsp" %>

<div class="container">
    <h2>商品管理 ${totalPages}</h2>

    <div class="data">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">编号</th>
                <th scope="col">名称</th>
                <th scope="col">图片</th>
                <th scope="col">价格</th>
                <th scope="col">状态</th>
                <th scope="col">库存</th>
                <th scope="col">上架时间</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${productAdminList}" var="product" varStatus="row">
                <tr>
                    <th scope="row">${row.index + 1}</th>
                    <td>${product.productName}</td>
                    <td><img src="image/${product.imageUrl}" alt="商品图片" class="img-fluid rounded"
                             style="height: 50px; width: 50px;"></td>
                    <td>${product.price}</td>
                    <td>${product.status == 1 ? '<span class="text-success">上架</span>' : '<span class="text-danger">下架</span>'}</td>
                    <td>${product.inventory}</td>
                    <td>${product.launchDate}</td>
                    <td>
                        <div class="link-container">
                            <a href="${pageContext.request.contextPath}/mpInfo?productId=${product.productId}"
                               class="view-link ${product.status == 1 ? 'text-secondary' : 'text-success'}"><i
                                    class="fas fa-eye"></i> 查看</a>
                        </div>
                        <div class="link-container">
                            <a href="${pageContext.request.contextPath}/productChange?status=${product.status}&p_id=${product.productId}"
                               class="edit-link ${product.status == 1 ? 'text-success' : 'text-secondary'}"><i
                                    class="fas fa-edit"></i> 修改状态</a>
                        </div>
                        <div class="link-container">
                            <a href="#"
                               class="delete-link ${product.status == 1 ? 'text-danger' : 'text-secondary'}"
                               onclick="return confirmDelete(${product.productId});"><i class="fas fa-trash"></i>
                                删除</a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

    <div class="pagination">
        <ul>
            <c:forEach var="page" begin="1" end="${totalPages}" step="1">
                <li${page == currentPage ? ' class="active"' : ''}>
                    <a href="${pageContext.request.contextPath}/ProductPage.do?currentPage=${page}&pageSize=${pageSize}">${page}</a>
                </li>
            </c:forEach>
        </ul>
    </div>
</div>

<%@ include file="footer.jsp" %>


<!-- 引入jQuery和Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>